<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
		
		<script>
			//过渡			
			//创建画布
			var width=600;
			var height=600;
			var svg=d3.select("body").append("svg").attr("height",height).attr("width",width);	
			//添加一个矩形，加入过渡
/*			var myrect=svg.append("rect")
			   .attr("fill","steelblue")
			   .attr("x",10)
			   .attr("y",10)
			   .attr("height",30)
			   .attr("width",100)
			   .transition()
			   .attr("width",300);*/

/*			var myrect=svg.append("rect")
			   .attr("fill","steelblue")
			   .attr("x",10)
			   .attr("y",10)
			   .attr("height",30)
			   .attr("width",100)
			   .transition()
			   .style("fill",'red');*/							 

/*			svg.append("rect")
				.attr("fill","yellow")
				.attr("x",100)
				.attr("y",100)
				 .attr("width",100)
				.attr("height",30)
				.transition()
				.delay(1000)
				.duration(1000)
				.attr("width",300)
			var text = svg.append("text")
				.attr("x",200)
				.attr("y",120)
				.text(100)
				.transition()
				.delay(1000)
				.duration(1000)
				.attr("x",400)
				.text(300)*/

			var rect = svg.append("rect")
				.attr("fill","yellow")
				.attr("x",100)
				.attr("y",100)
				.attr("width",100)
				.attr("height",30)
			rect.transition()
				.delay(1000)
				.attr("width",0)
				.remove()
				
			//交互
			
			var circle = svg.append("circle");
			circle.on("mouseover", mouseover);
			//自定义函数
			function mouseover(){
				//交互内容
			}
			
			
			
		</script>
		
	</body>
</html>
